<template>
    <div class="room-manage">

        <!-- 面包屑和标题 -->
        <el-breadcrumb separator="/" class="mb-2">
            <el-breadcrumb-item>会议管理</el-breadcrumb-item>
            <el-breadcrumb-item>会议室管理</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="page-title">会议室管理</div>

        <!-- 查询区 -->
        <div class="search-area">
            <el-input v-model="query.roomName" placeholder="请输入会议室名称" clearable style="width: 220px;" />
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button @click="onReset">重置</el-button>
            <el-button type="danger" :disabled="!selected.length" class="ml-2" @click="onDeleteRange">批量删除</el-button>
            <el-button type="primary" class="new-room-btn" @click="onCreateRoom">新增</el-button>
        </div>

        <!-- 会议室表格 -->
        <el-table :data="tableData" border stripe style="width: 100%" @selection-change="onSelectionChange">
            <el-table-column type="selection" width="40" />
            <el-table-column prop="Name" label="会议室名称" min-width="180">
                <template #default="scope">
                    <div class="room-info">
                        <el-image :src="scope.row.ImageUrl || defaultImage" class="room-image" fit="cover" />
                        <span>{{ scope.row.Name }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="Capacity" label="容纳人数" width="100">
                <template #default="scope">
                    {{ getCapacityRange(parseInt(scope.row.Capacity)) }}
                </template>
            </el-table-column>
            <el-table-column prop="Location" label="会议室位置" min-width="150" />
            <el-table-column prop="Manager" label="管理员" width="100" />
            <el-table-column prop="UserName" label="发起人" width="100" />
            <el-table-column prop="ContactPhone" label="联系电话" width="120" />
            <el-table-column prop="NeedsApproval" label="预约审批" width="100">
                <template #default="scope">
                    <span>{{ scope.row.NeedsApproval ? '是' : '否' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="IsSmartRoom" label="智能会议室" width="100">
                <template #default="scope">
                    <span>{{ scope.row.IsSmartRoom ? '是' : '否' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250" fixed="right">
                <template #default="scope">
                    <div class="operation-buttons">
                        <el-button size="small" type="primary" plain @click="onView(scope.row)">
                            <el-icon>
                                <View />
                            </el-icon>查看
                        </el-button>
                        <el-button size="small" type="warning" plain @click="onEdit(scope.row)">
                            <el-icon>
                                <Edit />
                            </el-icon>编辑
                        </el-button>
                        <el-button size="small" type="danger" plain @click="onDelete(scope.row)">
                            <el-icon>
                                <Delete />
                            </el-icon>删除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <CustomPagination class="mt-2" :currentPage="pageIndex" :pageSize="pageSize" :totalCount="pageInfo.totalCount"
            :totalPage="pageInfo.totalPage" @size-change="onPageSizeChange" @current-change="onCurrentPageChange" />

        <!-- 新建/编辑会议室弹窗 -->
        <el-dialog v-model="roomDialog.visible" :title="roomDialog.isEdit ? '编辑会议室' : '新增会议室'" width="900px">
            <el-form :model="roomForm" label-width="120px" :rules="roomRules" ref="roomFormRef">
                <div class="form-content-layout">
                    <div class="left-section">
                        <div class="form-section">
                            <div class="section-title">基本信息</div>
                            <el-form-item label="会议室模板:" prop="Template">
                                <el-select v-model="roomForm.Template" placeholder="请选择模板" @change="onTemplateChange"
                                    clearable style="width: 100%">
                                    <el-option v-for="item in roomTemplates" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="会议名称:" prop="Name" required>
                                <el-input v-model="roomForm.Name" placeholder="请输入会议名称" />
                            </el-form-item>
                            <el-form-item label="容纳人数:" prop="Capacity" required>
                                <el-select v-model="roomForm.Capacity" placeholder="请选择会议室">
                                    <el-option label="10-20人" :value="'1'" />
                                    <el-option label="21-50人" :value="'2'" />
                                    <el-option label="51-100人" :value="'3'" />
                                    <el-option label="100人以上" :value="'4'" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="会议室位置:" prop="Location" required>
                                <el-input v-model="roomForm.Location" placeholder="请选择会议室" />
                            </el-form-item>
                            <el-form-item label="会议室管理员:" prop="Manager" required>
                                <el-input v-model="roomForm.Manager" placeholder="请输入管理员姓名" />
                            </el-form-item>
                            <el-form-item label="发起人:" prop="UserName" required>
                                <el-input v-model="roomForm.UserName" placeholder="请输入发起人姓名" />
                            </el-form-item>
                            <el-form-item label="联系电话:" prop="ContactPhone" required>
                                <el-input v-model="roomForm.ContactPhone" placeholder="会议内容" />
                            </el-form-item>
                            <div class="checkbox-group">
                                <el-form-item label="" prop="NeedsApproval" class="checkbox-item">
                                    <el-checkbox v-model="roomForm.NeedsApproval" label="预约审批" />
                                </el-form-item>
                                <el-form-item label="" prop="IsSmartRoom" class="checkbox-item">
                                    <el-checkbox v-model="roomForm.IsSmartRoom" label="智能会议室" />
                                </el-form-item>
                            </div>
                        </div>
                    </div>
                    <div class="right-section image-upload-area">
                        <el-form-item label="会议室图片:" prop="ImageUrl">
                            <el-upload class="room-image-uploader" action="#" :http-request="uploadImage"
                                :show-file-list="false" :before-upload="beforeImageUpload">
                                <img v-if="roomForm.ImageUrl" :src="roomForm.ImageUrl" class="uploaded-image" />
                                <div v-else class="upload-placeholder">
                                    <el-icon class="upload-icon">
                                        <Picture />
                                    </el-icon>
                                    <span>点击上传图片</span>
                                </div>
                            </el-upload>
                            <div class="el-upload__tip">支持jpg、png格式，不超过2MB</div>
                        </el-form-item>
                    </div>
                </div>

            </el-form>
            <template #footer>
                <el-button @click="roomDialog.visible = false">取消</el-button>
                <el-button type="primary" @click="onSaveRoom">保存</el-button>
            </template>
        </el-dialog>

        <!-- 查看会议室详情弹窗 -->
        <el-dialog v-model="detailDialog.visible" title="会议室详情" width="700px">
            <div class="room-detail" v-if="detailDialog.room">
                <div class="detail-header">
                    <el-image :src="detailDialog.room.imageUrl || defaultImage" class="detail-image" fit="cover" />
                    <div class="detail-info">
                        <h2>{{ detailDialog.room.roomName }}</h2>
                        <p><i class="el-icon-location"></i> {{ detailDialog.room.location }}</p>
                        <p><i class="el-icon-user"></i> 容纳人数: {{ getCapacityRange(parseInt(detailDialog.room.capacity))
                            }}</p>
                        <p><i class="el-icon-s-custom"></i> 管理员: {{ detailDialog.room.managerName }}</p>
                        <p><i class="el-icon-user"></i> 发起人: {{ detailDialog.room.userName }}</p>
                        <p><i class="el-icon-phone"></i> 联系电话: {{ detailDialog.room.contactPhone }}</p>
                    </div>
                </div>
                <div class="detail-body">
                    <div class="detail-item">
                        <div class="item-label">预约审批:</div>
                        <div class="item-value">{{ detailDialog.room.hasReservation ? '需要' : '不需要' }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="item-label">智能会议室:</div>
                        <div class="item-value">{{ detailDialog.room.isSmartRoom ? '是' : '否' }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="item-label">设备配置:</div>
                        <div class="item-value">
                            <el-tag v-for="item in detailDialog.room.equipments" :key="item" class="equipment-tag">
                                {{ item }}
                            </el-tag>
                            <span
                                v-if="!detailDialog.room.equipments || detailDialog.room.equipments.length === 0">无</span>
                        </div>
                    </div>
                    <div class="detail-item">
                        <div class="item-label">备注:</div>
                        <div class="item-value">{{ detailDialog.room.remark || '无' }}</div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">

import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, View, Edit, Delete, User, Picture } from '@element-plus/icons-vue'
import CustomPagination from '@/components/CustomPagination.vue'
import {
    getRoomList,
    addRoom,
    updateRoom,
    deleteRoom,
    uploadRoomImage,
    type RoomListParams,
    type RoomListData,
    type UpdateRoomParams
} from '@/api/meetingroom'
import * as MeetingRoomApi from '@/api/meetingroom' // 导入整个模块并命名为 MeetingRoomApi
import { useStore } from '@/stores/userInfo'
import axios from 'axios'
import { getToken } from '@/utils/auth'

var userInfo = JSON.parse(localStorage.getItem('user_info') || '{}')


const userStore = useStore()

// 获取用户真实姓名
const userRealName = computed(() => {
    // 确保返回用户的真实姓名，使用正确的小写字段名
    return userStore.userinfo.realname || '';
})

// 默认会议室图片
const defaultImage = 'https://via.placeholder.com/100x80?text=会议室'

// 查询参数
const query = reactive({
    roomName: ''
})

// 分页参数
const pageIndex = ref(1)
const pageSize = ref(10)
const pageInfo = reactive({
    totalCount: 0,
    totalPage: 0
})

// 定义与后台API返回格式匹配的会议室列表项类型
interface RoomItem {
    Id: number;
    Name: string;
    Location: string;
    Capacity: string;
    Manager: string;
    UserName: string;
    ContactPhone: string;
    NeedsApproval: boolean;
    IsSmartRoom: boolean;
    ImageUrl?: string;
    Equipments?: string[];
    Remark?: string;
}

// 表格数据
const tableData = ref<RoomItem[]>([])
// 多选选中的会议室
const selected = ref<RoomItem[]>([])

// 会议室表单
const roomFormRef = ref()
interface RoomFormType {
    Id: number;
    Name: string;
    Location: string;
    Capacity: string;
    Manager: string;
    ContactPhone: string;
    UserName: string;
    NeedsApproval: boolean;
    IsSmartRoom: boolean;
    ImageUrl: string;
    Equipments: string[];
    Remark: string;
    Template?: string;
}

const roomForm = reactive<RoomFormType>({
    "Id": 0,
    "Name": "",
    "Capacity": "1",
    "Location": "",
    "Manager": "",
    "ContactPhone": "",
    "UserName": "admin",
    "NeedsApproval": false,
    "IsSmartRoom": false,
    "ImageUrl": "",
    "Equipments": [],
    "Remark": "",
    "Template": ""
})

// 会议室模板数据
const roomTemplates = [
    {
        label: "标准会议室",
        value: "standard",
        data: {
            Name: "标准会议室",
            Capacity: "2",
            Location: "总部大楼3楼",
            Manager: "张经理",
            ContactPhone: "13800138000",
            NeedsApproval: true,
            IsSmartRoom: false,
            ImageUrl: "https://via.placeholder.com/100x80?text=标准会议室",
            Equipments: ["投影仪", "白板"],
            Remark: "标准配置会议室，适合一般会议使用"
        }
    },
    {
        label: "高级会议室",
        value: "premium",
        data: {
            Name: "高级会议室",
            Capacity: "3",
            Location: "总部大楼5楼",
            Manager: "李总监",
            ContactPhone: "13900139000",
            NeedsApproval: true,
            IsSmartRoom: true,
            ImageUrl: "https://via.placeholder.com/100x80?text=高级会议室",
            Equipments: ["投影仪", "白板", "视频会议系统", "音响系统"],
            Remark: "高级配置会议室，适合重要会议使用"
        }
    },
    {
        label: "小型讨论室",
        value: "small",
        data: {
            Name: "小型讨论室",
            Capacity: "1",
            Location: "总部大楼2楼",
            Manager: "王助理",
            ContactPhone: "13700137000",
            NeedsApproval: false,
            IsSmartRoom: false,
            ImageUrl: "https://via.placeholder.com/100x80?text=小型讨论室",
            Equipments: ["白板"],
            Remark: "小型讨论室，适合小组讨论使用"
        }
    }
];

// 选择模板时的处理函数
const onTemplateChange = (templateValue: string) => {
    if (!templateValue) return;

    const template = roomTemplates.find(t => t.value === templateValue);
    if (template) {
        // 填充表单数据
        Object.assign(roomForm, template.data);
        // 点击模板后，图片请不要赋值，让他默认还是按钮
        roomForm.ImageUrl = '';
    }
}

// 会议室表单校验规则
const roomRules = {
    Name: [{ required: true, message: '请输入会议室名称', trigger: 'blur' }],
    Location: [{ required: true, message: '请输入会议室位置', trigger: 'blur' }],
    Capacity: [{ required: true, message: '请选择会议室容纳人数', trigger: 'change' }],
    Manager: [{ required: true, message: '请输入管理员姓名', trigger: 'blur' }],
    UserName: [{ required: true, message: '请输入发起人姓名', trigger: 'blur' }],
    ContactPhone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
    ],
    ImageUrl: [{ required: true, message: '请上传会议室图片', trigger: 'change' }]
}

// 会议室对话框状态
const roomDialog = reactive({
    visible: false,
    isEdit: false
})

// 详情对话框状态
interface RoomDetail {
    id: string;
    roomName: string;
    location: string;
    capacity: string;
    managerId: string;
    managerName: string;
    userName: string;
    contactPhone: string;
    hasReservation: boolean;
    isSmartRoom: boolean;
    imageUrl: string;
    equipments: string[];
    remark: string;
}

const detailDialog = reactive({
    visible: false,
    room: null as RoomDetail | null
})

// 获取容纳人数范围显示
const getCapacityRange = (capacity: number) => {
    switch (capacity) {
        case 1: return '11-20人'
        case 2: return '21-50人'
        case 3: return '51-100人'
        case 4: return '100人以上'
        default: return '未知'
    }
}

// 图片上传前的验证
const beforeImageUpload = (file: File) => {
    const isJPG = file.type === 'image/jpeg'
    const isPNG = file.type === 'image/png'
    const isLt2M = file.size / 1024 / 1024 < 2

    if (!isJPG && !isPNG) {
        ElMessage.error('上传图片只能是 JPG 或 PNG 格式!')
    }
    if (!isLt2M) {
        ElMessage.error('上传图片大小不能超过 2MB!')
    }
    return (isJPG || isPNG) && isLt2M
}

// 获取会议室列表
const fetchRoomList = async () => {
    try {
        // 获取token
        const token = getToken();
        if (!token) {
            ElMessage.error('未找到认证信息，请重新登录');
            return;
        }

        const params = {
            RoomName: query.roomName || undefined,
            pageIndex: pageIndex.value,
            pageSize: pageSize.value
        };

        // 直接使用axios调用API，避免响应拦截器处理
        const response = await axios({
            url: 'http://127.0.0.1:5150/BaseDataReadAPI/MeetingRoom/GetMeetingRoomList',
            method: 'GET',
            params: params,
            headers: {
                'Authorization': `Bearer ${token}`
            }
        });

        console.log('获取会议室列表响应:', response);

        // 直接处理原始响应数据
        if (response.data && response.data.IsSuc && response.data.Data) {
            // 确保Data是数组
            if (Array.isArray(response.data.Data.Data)) {
                tableData.value = response.data.Data.Data.map((apiItem: MeetingRoomApi.RoomItem) => {
                    const mappedItem = {
                        Id: apiItem.Id,
                        Name: apiItem.Name,
                        Location: apiItem.Location,
                        Capacity: String(apiItem.Capacity),
                        Manager: apiItem.Manager,
                        UserName: apiItem.UserName || '',
                        ContactPhone: apiItem.ContactPhone,
                        NeedsApproval: apiItem.NeedsApproval,
                        IsSmartRoom: apiItem.IsSmartRoom,
                        ImageUrl: apiItem.ImageUrl || '',
                        Equipments: apiItem.Equipments || [],
                        Remark: apiItem.Remark || '',
                    };
                    console.log('原始API数据 (apiItem):', apiItem);
                    console.log('映射后的数据 (mappedItem):', mappedItem);
                    return mappedItem;
                }) as RoomItem[];
            } else {
                tableData.value = [];
            }

            pageInfo.totalCount = response.data.Data.TotalCount || 0;
            pageInfo.totalPage = response.data.Data.TotalPage || 0;
        } else {
            tableData.value = [];
            pageInfo.totalCount = 0;
            pageInfo.totalPage = 0;
        }
    } catch (error: any) {
        console.error('获取会议室列表失败:', error);
        tableData.value = [];
        pageInfo.totalCount = 0;
        pageInfo.totalPage = 0;
        ElMessage.error('获取会议室列表失败: ' + (error.message || '未知错误'));
    }
}

// 查询按钮点击事件
const onSearch = () => {
    pageIndex.value = 1
    fetchRoomList()
}

// 重置按钮点击事件
const onReset = () => {
    query.roomName = ''
    pageIndex.value = 1
    fetchRoomList()
}

// 多选变化事件
const onSelectionChange = (rows: RoomItem[]) => {
    selected.value = rows
}

// 分页大小变化事件
const onPageSizeChange = (newSize: number) => {
    pageSize.value = newSize
    pageIndex.value = 1
    fetchRoomList()
}

// 当前页变化事件
const onCurrentPageChange = (newPage: number) => {
    pageIndex.value = newPage
    fetchRoomList()
}

// 新建会议室按钮点击事件
const onCreateRoom = () => {
    roomDialog.isEdit = false;
    // 重置表单
    Object.assign(roomForm, {
        Id: 0,
        Name: "",
        Capacity: "1",
        Location: "",
        Manager: userStore.userinfo.realname || "",
        ContactPhone: "",
        UserName: userStore.userinfo.realname || "admin",
        NeedsApproval: false,
        IsSmartRoom: false,
        ImageUrl: "",
        Equipments: [],
        Remark: "",
        Template: ""
    });
    roomFormRef.value?.resetFields();
    roomDialog.visible = true;
}

// 查看会议室详情
const onView = (row: RoomItem) => {
    // row 现在已经是本地 RoomItem 类型，直接使用其属性
    detailDialog.room = {
        id: row.Id?.toString() || '0',
        roomName: row.Name,
        location: row.Location,
        capacity: row.Capacity,
        managerId: '0',
        managerName: row.Manager,
        userName: row.UserName || '',
        contactPhone: row.ContactPhone,
        hasReservation: row.NeedsApproval,
        isSmartRoom: row.IsSmartRoom,
        imageUrl: row.ImageUrl || '',
        equipments: row.Equipments || [],
        remark: row.Remark || ''
    }
    detailDialog.visible = true
}

// 编辑会议室按钮点击事件
const onEdit = (row: RoomItem) => {
    roomDialog.isEdit = true;
    // 使用 Object.assign 填充表单数据，确保类型匹配
    Object.assign(roomForm, {
        Id: row.Id,
        Name: row.Name,
        Capacity: row.Capacity,
        Location: row.Location,
        Manager: row.Manager,
        UserName: row.UserName,
        ContactPhone: row.ContactPhone,
        NeedsApproval: row.NeedsApproval,
        IsSmartRoom: row.IsSmartRoom,
        ImageUrl: row.ImageUrl || "",
        Equipments: row.Equipments || [],
        Remark: row.Remark || '',
        Template: ""
    });
    roomDialog.visible = true;
}

// 自定义上传方法
const uploadImage = async (options: { file: File }) => {
    try {
        const file = options.file;
        const response = await uploadRoomImage(file) as any;

        // 响应拦截器已处理失败情况，这里直接处理成功响应
        roomForm.ImageUrl = response.Data.filePath;
        ElMessage.success(response.Msg || '图片上传成功');
    } catch (error: any) {
        console.error('上传图片失败:', error);
        ElMessage.error('上传图片失败，请稍后重试');
    }
}


// 保存会议室按钮点击事件
const onSaveRoom = async () => {
    roomFormRef.value?.validate(async (valid: boolean) => {
        if (!valid) return;

        try {
            // 确保所有必填字段都有值
            if (!roomForm.Name || !roomForm.Location || !roomForm.Capacity ||
                !roomForm.Manager || !roomForm.UserName || !roomForm.ImageUrl || !roomForm.ContactPhone) {
                ElMessage.error('请填写所有必填字段');
                return;
            }

            // 获取token
            const token = getToken();
            if (!token) {
                ElMessage.error('未找到认证信息，请重新登录');
                return;
            }

            // 处理表单数据
            const formData = {
                ...roomForm,
                // 确保Capacity是字符串类型
                Capacity: roomForm.Capacity.toString()
            };

            let response;

            if (roomDialog.isEdit) {
                // 编辑现有会议室
                response = await axios({
                    url: 'http://127.0.0.1:5150/BaseDataWriteAPI/MeetingRoom/UpdateMeetingRoom',
                    method: 'PUT',
                    data: {
                        updateMeetingRoomDto: {
                            Id: formData.Id,
                            Name: formData.Name,
                            Location: formData.Location,
                            Capacity: formData.Capacity,
                            Manager: formData.Manager,
                            UserName: formData.UserName,
                            ContactPhone: formData.ContactPhone,
                            NeedsApproval: formData.NeedsApproval,
                            IsSmartRoom: formData.IsSmartRoom,
                            ImageUrl: formData.ImageUrl,
                            Equipments: formData.Equipments,
                            Remark: formData.Remark
                        }
                    },
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                });
            } else {
                console.log('创建新会议室', formData);
                // 创建新会议室
                response = await axios({
                    url: 'http://127.0.0.1:5150/BaseDataWriteAPI/MeetingRoom/AddMeetingRoom',
                    method: 'POST',
                    data: formData,
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                });
            }

            console.log('保存响应:', response.data);

            if (response.data && response.data.IsSuc) {
                ElMessage.success(roomDialog.isEdit ? '会议室更新成功' : '会议室创建成功');
                roomDialog.visible = false;
                fetchRoomList();
            } else {
                ElMessage.error(response.data?.Msg || (roomDialog.isEdit ? '更新失败' : '创建失败'));
                console.error('保存失败响应:', response.data);
            }
        } catch (error: any) {
            console.error('保存会议室失败:', error);
            if (error.response) {
                console.error('错误响应数据:', error.response.data);
            }
            ElMessage.error(error.message || '保存会议室失败');
        }
    });
}

// 删除会议室按钮点击事件
const onDelete = (row: any) => {
    ElMessageBox.confirm(`确定要删除会议室"${row.Name}"吗？`, '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        try {
            // 获取token
            const token = getToken();
            if (!token) {
                ElMessage.error('未找到认证信息，请重新登录');
                return;
            }

            // 使用axios直接调用删除API
            const response = await axios({
                url: `http://127.0.0.1:5150/BaseDataWriteAPI/MeetingRoom/DeleteMeetingRoom`,
                method: 'DELETE',
                params: { Id: row.Id },
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            });

            console.log('删除响应:', response);

            if (response.data && response.data.IsSuc) {
                ElMessage.success('会议室删除成功');
                fetchRoomList();
            } else {
                ElMessage.error(response.data?.Msg || '会议室删除失败');
                console.error('删除失败响应:', response.data);
            }
        } catch (error: any) {
            console.error('删除会议室失败:', error);
            if (error.response) {
                console.error('错误响应数据:', error.response.data);
            }
            ElMessage.error(error.message || '删除会议室失败');
        }
    });
}

//批量删除会议室
const onDeleteRange = () => {
    if (selected.value.length === 0) {
        ElMessage.warning('请选择要删除的会议室');
        return;
    }

    ElMessageBox.confirm(`确定要删除选中的${selected.value.length}个会议室吗？`, '批量删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        try {
            // 将选中的会议室ID转换为逗号分隔的字符串
            const roomIds = selected.value.map(item => item.Id).join(',');

            // 调用批量删除API
            const response = await MeetingRoomApi.deleteRangeRoom(roomIds);

            // 处理响应
            ElMessage.success(`成功删除${selected.value.length}个会议室`);
            fetchRoomList(); // 刷新列表
        } catch (error: any) {
            console.error('批量删除会议室失败:', error);
            ElMessage.error(error.message || '批量删除会议室失败');
        }
    }).catch(() => {
        ElMessage.info('已取消删除');
    });
}

onMounted(() => {
    fetchRoomList();
})
</script>

<style scoped>
/* 添加一些自定义的样式代码 */
.room-info {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 添加间距 */
}

.room-image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    /* 防止图片在父容器空间不足时缩小 */
}

.room-image-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    width: 80px;
    /* 调整上传区域的宽度 */
    height: 80px;
    /* 调整上传区域的高度 */
    display: flex;
    /* 使用flex布局使内容居中 */
    justify-content: center;
    align-items: center;
}

.room-image-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.uploaded-image {
    width: 80px;
    /* 强制图片宽度 */
    height: 80px;
    /* 强制图片高度 */
    display: block;
    object-fit: cover;
    /* 确保图片覆盖整个区域 */
}

.el-icon.upload-icon {
    font-size: 50px;
    /* 增大加号图标的大小 */
    color: #8c939d;
    text-align: center;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #8c939d;
}

.upload-placeholder span {
    margin-top: 8px;
    /* Space between icon and text */
    font-size: 14px;
}

.detail-image {
    width: 80px;
    /* 调整详情图片宽度 */
    height: 80px;
    /* 调整详情图片高度 */
    border-radius: 4px;
    object-fit: cover;
}
</style>